<template>
  <div>
    <ul>
      <li v-for="item in renderData" :key="item.uname">
        姓名：{{ item.uname }} 成绩：{{ item.score }}
      </li>
    </ul>

    <button @click="fn">点击添加到最后一项</button>
    <button @click="fn1">点击添加到第二项</button>
  </div>
</template>

<script>
export default {
  //该vue组件的数据源
  data() {
    return {
      renderData: [
        {
          uname: '陈志豪',
          score: '100',
        },
        {
          uname: '沈德亮',
          score: '95',
        },
        {
          uname: '侯涵翔',
          score: '60',
        },
        {
          uname: '石益涛',
          score: '99',
        },
        {
          uname: '魏芳芳',
          score: '150',
        },
        {
          uname: '郑新新',
          score: '150',
        },
      ],
    }
  },
  methods: {
    fn() {
      this.renderData.push({
        uname: '钟宗明',
        score: '200',
      })
    },
    fn1() {
      this.renderData.splice(1, 0, { uname: '韩书昌', score: '250' })
    },
  },
}
</script>

<style scoped></style>
